import {create} from 'zustand';
import  {immer} from 'zustand/middleware/immer';
import { persist } from 'zustand/middleware'; // 持久化存储中间件

// @1  定义状态
// @2  组件使用状态
// @3  持久化存储



// const state = persist((set, get) => ({
//         price: 100, //价格
//         count: 1, //数量
//         foodName: '苹果', //食物名称
    
//         width: 100,
//         height:100,
//         color:'red',
    
//         addCount:()=>{
//             //@1 直接使用set设置状态，支持单个修改
//             set({count: get().count + 1});
//         },
    
//         removeCount:()=>{
//             //@2 使用set设置状态,后面覆盖前面的
//             // set(state => ({...state, count: state.count-1}));
    
//             // set(state => {state.count - 1}); // 错误写法，不会触发更新
    
//             // @3 正确写法，会触发更新 必须依赖immer中间件  [  state.count = state.count - 1 ]      ***这种写法就是一个函数  
//             set(state => {state.count++});  //推荐写法 √
//         },
    
//         getAmount:() =>{
//             // console.log(get()); // 拿到state对象
//             return get().price * get().count;
//         },
    
//         // @3 异步操作
//         doubleCount: async() => {
//             try {
//                 const res = await new Promise(resolve => {
//                     const timer = setTimeout(() => {
//                         clearTimeout(timer)
//                         resolve(2);
//                     }, 0);
//                 }); // 模拟异步操作
//                set({count: get().count * res});
//             } catch (error) {
//                 console.error('Error fetching data:', error);
//             }
//         },
//         setColor:(color) =>{
//             set(state => {state.color = color})
//         }
// }),{name: 'myAppleStoreSt',etStorage: () => localStorage})


const stateObj = (set, get) => ({
    price: 100, //价格
    count: 1, //数量
    foodName: '苹果', //食物名称

    width: 100,
    height:100,
    color:'red',

    addCount:()=>{
        //@1 直接使用set设置状态，支持单个修改
        set({count: get().count + 1});
    },

    removeCount:()=>{
        //@2 使用set设置状态,后面覆盖前面的
        // set(state => ({...state, count: state.count-1}));

        // set(state => {state.count - 1}); // 错误写法，不会触发更新

        // @3 正确写法，会触发更新 必须依赖immer中间件  [  state.count = state.count - 1 ]      ***这种写法就是一个函数  
        set(state => {state.count++});  //推荐写法 √
    },

    getAmount:() =>{
        // console.log(get()); // 拿到state对象
        return get().price * get().count;
    },

    // @3 异步操作
    doubleCount: async() => {
        try {
            const res = await new Promise(resolve => {
                const timer = setTimeout(() => {
                    clearTimeout(timer)
                    resolve(2);
                }, 0);
            }); // 模拟异步操作
           set({count: get().count * res});
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    },
    setColor:(color) =>{
        set(state => {state.color = color})
    }
});







// const useAppleStore = create(
//     immer(
//         persist((set, get) => ({  
//             price: 100, //价格
//             count: 1, //数量
//             foodName: '苹果', //食物名称
        
//             width: 100,
//             height:100,
//             color:'red',
        
//             addCount:()=>{
//                 //@1 直接使用set设置状态，支持单个修改
//                 set({count: get().count + 1});
//             },
        
//             removeCount:()=>{
//                 //@2 使用set设置状态,后面覆盖前面的
//                 // set(state => ({...state, count: state.count-1}));
        
//                 // set(state => {state.count - 1}); // 错误写法，不会触发更新
        
//                 // @3 正确写法，会触发更新 必须依赖immer中间件  [  state.count = state.count - 1 ]      ***这种写法就是一个函数  
//                 set(state => {state.count++});  //推荐写法 √
//             },
        
//             getAmount:() =>{
//                 // console.log(get()); // 拿到state对象
//                 return get().price * get().count;
//             },
        
//             // @3 异步操作
//             doubleCount: async() => {
//                 try {
//                     const res = await new Promise(resolve => {
//                         const timer = setTimeout(() => {
//                             clearTimeout(timer)
//                             resolve(2);
//                         }, 0);
//                     }); // 模拟异步操作
//                    set({count: get().count * res});
//                 } catch (error) {
//                     console.error('Error fetching data:', error);
//                 }
//             },
//             setColor:(color) =>{
//                 set(state => {state.color = color})
//             }
//         }), {name: 'myAppleStoreInfo'})
//     )
// );


const useAppleStore = create(
    persist(
            (set,get) => ({
                price: 100, //价格
                count: 1, //数量
                foodName: '苹果', //食物名称
            
                width: 100,
                height:100,
                color:'red',
            
                addCount:()=>{
                    //@1 直接使用set设置状态，支持单个修改
                    set({count: get().count + 1});
                },
            
                removeCount:()=>{
                    //@2 使用set设置状态,后面覆盖前面的
                    // set(state => ({...state, count: state.count-1}));
            
                    // set(state => {state.count - 1}); // 错误写法，不会触发更新
            
                    // @3 正确写法，会触发更新 必须依赖immer中间件  [  state.count = state.count - 1 ]      ***这种写法就是一个函数  
                    set(state => {state.count++});  //推荐写法 √
                },
            
                getAmount:() =>{
                    // console.log(get()); // 拿到state对象
                    return get().price * get().count;
                },
            
                // @3 异步操作
                doubleCount: async() => {
                    try {
                        const res = await new Promise(resolve => {
                            const timer = setTimeout(() => {
                                clearTimeout(timer)
                                resolve(2);
                            }, 0);
                        }); // 模拟异步操作
                    set({count: get().count * res});
                    } catch (error) {
                        console.error('Error fetching data:', error);
                    }
                },
                setColor:(color) =>{
                    set(state => {state.color = color})
                }
            })
), {name:'myAppleStoreInfo222'}
);
    

export default useAppleStore;